<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // flag:平
    // 1.flat的使用: 
    // 将一个数组, 按照制定的深度遍历, 将遍历到的元素和子数组中的元素组成一个新的数组, 进行返回
    const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]
    const newNum1 = nums.flat(1, nums)
    console.log(newNum1) // [10, 20, 111, 222, 333, 444, [123, 321], [231, 312]]
    const newNum2 = nums.flat(2, nums)
    console.log(newNum2) // [10, 20, 111, 222, 333, 444, 123, 321, 231, 312]

    // 2.flatMap的使用:
    // 1> 对数组中每一个元素应用一次传入的map对应的函数
    const messages = [
      'Hello World',
      'Hello JavaScript',
      'Hello ES6'
    ]
    // 自己的方式
    // 1
    const newInfos = []
    for (const item of messages) {
      const infos = item.split(" ")
      for (const info of infos) {
        newInfos.push(info)
      }
    }
    console.log(newInfos)// ["Hello", "World", "Hello", "JavaScript", "Hello", "ES6"]

    // 2
    const newMessages = messages.map(item => item.split(" "))
    console.log(newMessages) // [["Hello", "World"], ["Hello", "JavaScript"], ["Hello", "ES6"]]
    const finalMessages = newMessages.flat(1)
    console.log(finalMessages) // ["Hello", "World", "Hello", "JavaScript", "Hello", "ES6"]

    // flatMap的方式
    const finalMessages1 = messages.flatMap(item => item.split(" "))
    console.log(finalMessages1) // ["Hello", "World", "Hello", "JavaScript", "Hello", "ES6"]


  </script>
</body>

</html>